<template>
  <div>
    <el-row>
        <el-col>
            <el-descriptions class="margin-top" title="个人信息" :column="2" border>
                <template slot="extra">

                    <el-button type="primary" size="small" @click="updata"><span class="el-icon-edit"/>编辑</el-button>
                    <!-- 编辑个人信息弹窗 -->
                    <el-dialog
                    title="编辑"
                    :center="true"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                    
                        <el-form :model="formLabelAlign" label-position="right" ref="savefrom_method" :rules="savefrom" label-width="80px">
                            <el-form-item label="用户名" prop="name">
                                <el-input v-model="formLabelAlign.name"></el-input>
                            </el-form-item>
                            <el-form-item label="居住地" prop="residence">
                                <el-input v-model="formLabelAlign.residence"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号" prop="phone">
                                <el-input v-model="formLabelAlign.phone"></el-input>
                            </el-form-item>
                            <el-form-item label="描述">
                                <el-tag
                                :key="tag.id"
                                v-for="tag in dynamicTags"
                                closable
                                :disable-transitions="false"
                                @close="handleClose2(tag.data)">
                                    {{tag.data}}
                                </el-tag>
                                <el-input
                                class="input-new-tag"
                                v-if="inputVisible"
                                v-model="inputValue"
                                ref="saveTagInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm"
                                @blur="handleInputConfirm"
                                >
                                </el-input>
                                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                            </el-form-item>
                            <el-form-item label="Mail" prop="mail">
                                <el-input v-model="formLabelAlign.mail"></el-input>
                            </el-form-item>
                            <el-form-item label="Gitee" prop="gitee">
                                <el-input v-model="formLabelAlign.gitee"></el-input>
                            </el-form-item>
                        </el-form>

                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="save('savefrom_method')">保 存</el-button>
                        </span>
                    </el-dialog>
                </template>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        用户名
                    </template>
                   {{name}} 
                </el-descriptions-item>
                
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        居住地
                    </template>
                    {{residence}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号
                    </template>
                    {{phone}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        描述
                    </template>
                    <el-tag size="small" :typ="it" v-for="(it) in its" :key="it.id">{{it.data}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="iconfont icon-youjian"></i>
                        Mail
                    </template>
                   {{mail}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="iconfont icon-gitee-fill-round"></i>
                        Gitee
                    </template>
                   <a :href="gitee">{{gitee}}</a>
                </el-descriptions-item>
            </el-descriptions>
        </el-col>
    </el-row>
    <el-row>
        <el-divider></el-divider>
        <el-col :md="24">
            <el-descriptions class="margin-top" title="关于我" :column="1" :border="false" :colon="false">
                <template slot="extra">
                    <el-button type="primary" size="small" @click="updata_about()"><span class="el-icon-edit"/>编辑</el-button>
                    <!-- 关于我弹窗 -->
                    <el-dialog
                    title="编辑"
                    :center="true"
                    :visible.sync="about"
                    width="30%"
                    :before-close="handleClose">
                    
                        <el-form :model="formLabelAlign" label-position="right" :rules="savefrom" label-width="80px">
                            <el-input 
                            type="textarea"
                            autosize
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="dialog_about.about"></el-input>
                        </el-form>

                        <span slot="footer" class="dialog-footer">
                            <el-button @click="about = false">取 消</el-button>
                            <el-button type="primary" @click="save_about()">保 存</el-button>
                        </span>
                    </el-dialog>

                </template>
                <el-descriptions-item>
                    <div v-html="about_me"></div>
                </el-descriptions-item>
            </el-descriptions>
            
        </el-col>
    </el-row>
  </div>
</template>

<style>
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>

<script>

export default {
    data(){
        return{
            about_me: "",
            dialog_about: {
                about:""
            },
            about: false,

            dynamicTags: [],
            inputVisible: false,
            inputValue: '',

            dialogVisible: false,

            name:'',
            phone: '',
            residence: '',
            // its: ["Java开发","客户端技术","数据库"],
            // its: [],
            its: [],
            mail: '',
            gitee: '',

            formLabelAlign: {
                name: '',
                phone: '',
                residence: '',
                mail: '',
                gitee: ''
            },
            savefrom: {
                name:[
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '电话不能为空', trigger: 'blur' },
                    { min: 11, max: 11, message: '请输入正确的电话号码', trigger: 'blur' }
                ],
                residence: {required: true, message: '域名不能为空', trigger: 'blur'},
                mail: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                gitee: {required: true, message: '域名不能为空', trigger: 'blur'}
            },
        }
    },
    mounted:function(){
        this.get();
        // console.log(this.its)
    },
    methods: {
        get:function(){
            // 查询个人信息
            this.$http.get("all").then(res =>{
                this.name = res.data[0].name
                this.about_me=res.data[0].about;
                this.phone = res.data[0].phone
                this.residence = res.data[0].city
                this.gitee = res.data[0].gitee
                this.mail = res.data[0].mail
            })
            this.$http.get("desc/1").then(res =>{
                // for(var i in res.data){
                    console.log(res.data)
                    // this.its.push(res.data[i].data)
                    this.its = res.data
                // }
            })
            
        },

        updata_about(){
            this.about=true;
            this.dialog_about.about=this.about_me;
        },
        // 更新关于我 方法
        save_about(){
            this.$http.post("updataAboutMe",this.dialog_about).then(res => {
                // console.log(res.data.status)
                if(res.data.status==200){
                    this.about=false;
                    this.$notify({
                        title: '成功',
                        message: '修改成功',
                        type: 'success',
                        position: 'bottom-right'
                    });
                }else{
                    this.about=false;
                    this.$notify.error({
                        title: '错误',
                        message: '更新失败'
                    });
                }
                this.about_me=this.dialog_about.about;
            });
        },
        updata(){
            this.dialogVisible=true;
            this.formLabelAlign.name=this.name;
            this.formLabelAlign.phone=this.phone;
            this.formLabelAlign.residence=this.residence;
            this.dynamicTags=this.its;
            this.formLabelAlign.mail=this.mail;
            this.formLabelAlign.gitee=this.gitee;
        },
        updataf(name){
            // let data=name   //要传的值
            this.$emit('childClick',name)
        },
        save(save_menthod){
            this.$refs[save_menthod].validate(async(valid) => {
                    if(valid){
                        this.$http.post("updatamy_message",this.formLabelAlign).then(res => {
                            // console.log(res)
                            if(res.data.status==200){
                                this.about=false;
                                this.updataf(this.formLabelAlign.name);
                                this.$notify({
                                    title: '成功',
                                    message: '修改成功',
                                    type: 'success',
                                    position: 'bottom-right'
                                });
                            }else{
                                this.about=false;
                                this.$notify.error({
                                    title: '错误',
                                    message: '更新失败'
                                });
                            }
                        });
                        this.dialogVisible=false;
                        this.name=this.formLabelAlign.name;
                        this.phone=this.formLabelAlign.phone;
                        this.residence=this.formLabelAlign.residence;
                        this.its=this.dynamicTags;
                        this.mail=this.formLabelAlign.mail;
                        this.gitee=this.formLabelAlign.gitee;
                    }else{
                        
                    }
                });
            
        },
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      

       handleClose2(tag) {
        // console.log(tag)
        this.$http.post("deleteescription",{data:tag}).then(res => {
            // console.log(res.data)
            if(res.data.status==200){
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
                // this.$notify({
                //     title: '成功',
                //     message: '删除成功',
                //     type: 'success',
                //     position: 'bottom-right'
                // });
            }else{
                // this.$notify.error({
                //     title: '错误',
                //     message: '删除失败'
                // });
            }
        })
      },

      showInput() {
        if(this.dynamicTags.length<=2){
            this.inputVisible = true;
        }else{
            this.$message.error("最多只能加三个")
        }
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        // console.log(inputValue.length)
        if (inputValue) {
          this.$http.post("insertdescription",{data:inputValue,descriptionId:1}).then(res => {
            if(res.data.status==200){
                this.dynamicTags.push({id:inputValue.length,data:inputValue,descriptionId:1});
            }
          })
        }
        this.inputVisible = false;
        this.inputValue = '';
      }
    }
}
</script>

